一、问题
vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送。
二、解决方法
首先可以使用v-model.trim
这个v-model
修饰符去解决它,但是当用户输入\u200B
时,这个方法就不奏效了,这时我们可以去一下v-model.trim
这个修饰符的源码
function genDefaultModel (
el: ASTElement,
value: string,
modifiers: ?ASTModifiers
): ?boolean {
const type = el.attrsMap.type
const { lazy, number, trim } = modifiers || {}
const needCompositionGuard = !lazy && type !== 'range'
const event = lazy
? 'change'
: type === 'range'
? RANGE_TOKEN
: 'input'
let valueExpression = '$event.target.value'
// 去掉空格
if (trim) {
valueExpression = `$event.target.value.trim()`
}
if (number) {
valueExpression = `_n(${valueExpression})`
}
let code = genAssignmentCode(value, valueExpression)
if (needCompositionGuard) {
code = `if($event.target.composing)return;${code}`
}
addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)
if (trim || number || type === 'number') {
addHandler(el, 'blur', '$forceUpdate()')
}
}
上面的源码处理方式我们也可以理解为下面这种方式:
<input :value="name" @input="if($event.target.composing)return;name=$event.target.value.trim()" type="text"/>
所以我们可以把上面的方法强化或者改进一下:
<template>
<div @input="removeSpaces">
<el-input v-model.trim="value"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
value : ''
}
},
methods: {
removeSpaces(event) {
if(event.target.composing){
return
}
this.value = event.target.value.trim()
this.value = this.value.replace("\\u200B","")
}
}
}
</script>
同理,使用这种方法我们可以定制一些其他功能的输入框组件
参考文章:参考文章
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。